<template>
	<Modal
		destroyOnClose
		v-model:open="modelValue"
		v-if="position === 'center'"
		:footer="null"
		:width="width"
		:keyboard="!lock && !closing && closable && escClosable"
		:maskClosable="!lock && !closing && closable && maskClosable"
		:closable="false"
	>
		<Spin :spinning="loading" v-if="isIframe()">
			<iframe width="100%" :height="height ?? 600" :src="component as string" style="border: none" @load="finishLoading" />
		</Spin>
		<component :is="component" v-bind="params" v-else-if="component" />
		<template #title>
			<div class="dmy-antd-title">
				<span>{{ title }}</span>
				<Space class="dmy-antd-icon">
					<span v-if="enableLock" @click.stop="lock = !lock">
						<LockOutlined v-if="lock" />
						<UnlockOutlined v-else />
					</span>
					<span v-if="countdown">{{ countdown }}</span>
					<CloseOutlined v-else-if="xClosable && closable && !closing && !lock" @click.stop="lock || close()" :class="lock && 'lock'" />
				</Space>
			</div>
		</template>
	</Modal>
	<Drawer
		destroyOnClose
		:height="height"
		:width="width"
		v-model:open="modelValue"
		:placement="position"
		:keyboard="!lock && !closing && closable && escClosable"
		:maskClosable="!lock && !closing && closable && maskClosable"
		:closable="false"
		v-else-if="isShow"
	>
		<Spin :spinning="loading" v-if="isIframe()">
			<iframe width="100%" :height="height ?? 800" :src="component as string" style="border: none" @load="finishLoading" />
		</Spin>
		<component :is="component" v-bind="params" v-else-if="component" />
		<template #title>
			<div class="dmy-antd-title">
				<span>{{ title }}</span>
				<Space class="dmy-antd-icon">
					<span v-if="enableLock" @click.stop="lock = !lock">
						<LockOutlined v-if="lock" />
						<UnlockOutlined v-else />
					</span>
					<span v-if="countdown">{{ countdown }}</span>
					<CloseOutlined v-else-if="xClosable && closable && !closing && !lock" @click.stop="lock || close()" :class="lock && 'lock'" />
				</Space>
			</div>
		</template>
	</Drawer>
</template>

<script setup lang="ts">
import { Drawer, Modal, Space, Spin } from 'ant-design-vue'
import { CloseOutlined, LockOutlined, UnlockOutlined } from '@ant-design/icons-vue'
import { defineModel, nextTick, PropType, provide, reactive, ref, toRefs, watch } from 'vue'
import { isString } from 'lodash-es'
import { ComponentType, modalInjectionKey } from '@idmy/core'

const props = defineProps({
	closable: { type: Boolean, default: true },
	close: { type: Function as PropType<(...args: any) => Promise<void>>, required: true },
	closing: { type: Boolean, default: false },
	component: { type: [Object, String] as PropType<ComponentType>, required: true },
	countdown: { type: Number, default: 0 },
	enableLock: { type: Boolean, default: false },
	escClosable: { type: Boolean, default: true },
	height: { type: [Number, String] },
	maskClosable: { type: Boolean, default: false },
	ok: { type: Function as PropType<(...args: any) => Promise<void>>, required: true },
	params: Object,
	position: { type: String as PropType<'center' | 'left' | 'right' | 'top' | 'bottom'> },
	title: String,
	width: { type: [Number, String] },
	xClosable: { type: Boolean, default: true },
})

const modelValue = defineModel<boolean>('modelValue', { default: false })
const lock = defineModel<boolean>('lock', { default: false })

const isIframe = () => {
	if (isString(props.component)) {
		if (props.component.startsWith?.('http://') || props.component.startsWith?.('https://')) {
			return true
		}
	}
	return false
}

const loading = ref(true)

function finishLoading() {
	loading.value = false
}

const isShow = ref(true)
watch(
	() => modelValue.value,
	val => {
		nextTick(() => {
			setTimeout(() => {
				isShow.value = val
			}, 100)
		})
	}
)

const { closing } = toRefs(props)

provide(
	modalInjectionKey,
	reactive({
		close: props.close,
		closing,
		lock,
		ok: props.ok,
	})
)
</script>
